<template>
  <div>
    <div style="width: 500px">
      <el-input
          placeholder="请输入菜单名称进行搜索。。。"
          prefix-icon="el-icon-search"
          size="small"
          v-model="filterText">
      </el-input>

      <el-tree
          class="filter-tree"
          :data="menus"
          :props="defaultProps"
          :default-expand-all="false"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          ref="tree">
        <span class="custom-tree-node" slot-scope="{ node, data }"
              style="justify-content: space-between;display: flex;width: 100%">
            <span>{{ data.name }}</span>
            <span>
              <el-button
                  type="primary"
                  size="mini"
                  class="menuBtn"
                  @click="() => showAddMenu(data)">
                添加菜单
              </el-button>
              <el-button
                  type="danger"
                  size="mini"
                  class="menuBtn"
                  @click="() => deleteMenu(data)">
                删除菜单
              </el-button>
            </span>
          </span>
      </el-tree>
      <el-dialog
          title="添加菜单"
          :visible.sync="dialogVisible"
          width="35%">
        <div style="width: 90%">
          <el-form :model="menu" :rules="rules" ref="menuForm" label-width="125px" >
            <el-row>
              <el-col :span="24">
            <el-form-item label="菜单名称" prop="name" >
              <el-input v-model="menu.name" placeholder="请输入菜单名称。。。" size="mini"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
            <el-form-item label="url" prop="url">
              <el-input v-model="menu.url" placeholder="请输入url。。。" size="mini"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
            <el-form-item label="路由path" prop="path">
              <el-input v-model="menu.path" placeholder="请输入路由path。。。" size="mini"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
            <el-form-item label="组件名称" prop="component">
              <el-input v-model="menu.component" placeholder="请输入组件名称。。。" size="mini" ></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col  :span="24">
            <el-form-item label="是否是父级菜单" prop="hasChildren" >
              <el-radio-group v-model="menu.hasChildren" style="margin-top: 12px">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
            <el-form-item label="是否启用" prop="enabled">
              <el-switch v-model="menu.enabled" style="margin-top: 12px"></el-switch>
            </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doAddMenu">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "MenuMana",
  data(){
    return {
      dialogVisible:false,
      filterText:'',
      menus:[],
      menu:{
        name:"" ,
        parentId :"",
        url :"",
        component :"",
        path:""  ,
        enabled :true,
        hasChildren:""
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      rules: {
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入url', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入路由path', trigger: 'blur' }
        ],
        component: [
          {required: true, message: '请输入组件名称', trigger: 'blur' }
        ],
        hasChildren: [
          {required: true, message: '请选择是否是父级菜单', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.initMenus();
  },
  methods:{
    addMenuToMenus(menus,menu){
      for(let i = 0;i < menus.length;i++){
        let m = menus[i];
        if(m.id === menu.parentId){
          m.children = m.children.concat(menu);
          return;
        }else{
          this.addMenuToMenus(m.children,menu);
        }
      }

    },
    //添加弹出框
    showAddMenu(data){
      this.menu.parentId = data.id;

      this.dialogVisible = true;
    },
    removeMenuFromMenus(p,menus,id){
      for(let i = 0;i < menus.length;i++){
        let d = menus[i];
        if(d.id === id){
          menus.splice(i,1);
          if(menus.length===0){
            p.hasChildren = '0';
          }
          return;
        }else {
          this.removeMenuFromMenus(d,d.children,id);
        }
      }
    },
    //删除
    deleteMenu(data){
      if(data.children.length>0){
        this.$message.error("父菜单删除失败！！！")
      }else{
        this.$confirm('此操作将永久删除['+data.name+']菜单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$deleteRequest("/system/cfg/deleteMenu/"+data.id).then(resp=>{
            if(resp){
              this.removeMenuFromMenus(null,this.menus,data.id);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    //添加菜单
    doAddMenu(){
      this.$refs['menuForm'].validate((valid) => {
        if (valid) {
          this.$postRequest("/system/cfg/addMenu", this.menu).then(resp => {
            if (resp) {
              this.dialogVisible = false;
              this.menu = {
                name: "",
                parentId: "",
                url: "",
                component: "",
                path: "",
                enabled: true,
                hasChildren: ""
              };
              this.initMenus();
              this.addMenuToMenus(this.menus, resp.obj);
            }

          })
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //初始化菜单
    initMenus(){
      this.$getRequest("/system/cfg/allMenus").then(resp=>{
        if(resp){
          this.menus = resp;
          console.log(resp)
        }
      })
    }
  }
}
</script>

<style scoped>
.menuBtn{
  padding: 2px;
}
</style>